<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NAvatar,
  NButton,
  NEllipsis,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NPopconfirm, NSelect,
  NSwitch,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import TheIcon from '@/components/icon/TheIcon.vue'
import { getToken } from '@/utils'
import { renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import {router} from "@/router";
const base_path = import.meta.env.VITE_BASE
import default_image from "@/assets/images/mz.jpg"

defineOptions({ name: '企业管理' })
const $table = ref(null)
const queryItems = ref({})
import { useRoute } from 'vue-router';
const route = useRoute();

const {
  modalVisible,
  modalTitle,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '企业',
  initForm: {},
  doCreate: api.createCustomersFollowUser,//接口地址修改
  doUpdate: api.updateCustomers,//接口地址修改
  doDelete: api.deleteCustomers,//接口地址修改
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  price:0
});





onMounted(() => {
 data.price = route.query.price
})

//表单规则部分
const addAPIRules = {
  qymc: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: ['input', 'blur'],
    },
  ],
  qysh: [
    {
      required: true,
      message: '请输入企业税号',
      trigger: ['input', 'blur'],
    },
  ],
  yh_no: [
    {
      required: true,
      message: '请输入银行卡号',
      trigger: ['input', 'blur'],
    },
  ],
  name: [
    {
      required: true,
      message: '请输入法人姓名',
      trigger: ['input', 'blur'],
    },
  ],
  yh_khh: [
    {
      required: true,
      message: '请输入开户行',
      trigger: ['input', 'blur'],
    },
  ],
  yh_phone: [
    {
      required: true,
      message: '请输入预留手机号',
      trigger: ['input', 'blur'],
    },
  ],
}

//上传头像
const message = useMessage();

function on_save(){
  message.error("尊敬的客户,由于您的信用评分不足,将暂停您的税票贷提款功能,请联系您的客户经理,给您带来的不便敬请谅解！")
}

</script>

<template>
  <!-- 业务页面 -->
  <CommonPage show-footer style="background: #1b3a7d;">
    <template #header>
        <n-page-header subtitle="/    企业贷款专家" style="color:#ffffff">
    <template #title>
      <a href="https://anyway.fm/" style="text-decoration: none; color: #ffffff">查询结果</a>
    </template>
    <template #avatar>
      <n-avatar
        src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
      />
    </template>
  </n-page-header>
    </template>

      <NForm ref="modalFormRef" label-placement="left" label-align="left" :label-width="100" :model="modalForm"
             :rules="addAPIRules" :validate-on-rule-change="true" size="large">

            <n-divider dashed>
              可用额度(元)
            </n-divider>
           <div style="font-size: 40px;color: #1b3a7d;width: 100%;text-align: center;">
             <div style="width: 100%">¥<n-number-animation ref="numberAnimationInstRef" show-separator :from="0" :to="data.price"  /></div>
             <div style="width: 100%;font-size: 14px;margin-top: 10px;color: #6a6a6a">授信总额度(元)：{{data.price}}</div>
           </div>



        <div style="padding: 0 50px;margin-top: 20px">
        <NButton size="large" style="margin: auto;width: 100%" type="primary" @click="on_save">
          去签约
        </NButton>
        </div>

        <n-alert title="注意事项" type="warning" style="margin-top: 50px">
          根据企业的规模和年度申报，企业各个维度的信用资产，得出的本申请结果仅供参考。
          详细信息可以咨询专属的客户经理。
        </n-alert>

      </NForm>

  </CommonPage>
</template>
